<template>
  <div class="wrap">
    <!-- 搜索框 -->
    <div class="search">
      <img src="../assets/img/player_title.png" alt="" />
      <!-- 搜索歌曲 -->
      <input
        type="text"
        autocomplete="off"
        v-model="query"
        @keyup.enter="searchMusic()"
      />
    </div>
    <div class="center_con">
      <!-- 搜索歌曲列表 -->
      <div class="song_wrapper">
        <ul class="song_list">
          <li v-for="item in musicList" :key="item.id">
            <!-- 点击放歌 -->
            <a href="javascript:;" @click="playMusic(item.id)"></a>
            <b>{{ item.name }}</b>
            <span>
              <i @click="playMv(item.mvid)" v-if="item.mvid != 0"></i>
            </span>
          </li>
        </ul>
        <img src="../assets/img/line.png" class="switch_btn" alt="" />
      </div>
      <!-- 歌曲信息容器 -->
      <div class="player_con" :class="{ playing: isPlay }">
        <img src="../assets/img/player_bar.png" class="play_bar" />
        <!-- 黑胶碟片 -->
        <img src="../assets/img/disc.png" class="disc autoRotate" alt="" />
        <img
          :src="imgUrl == '' ? require('../assets/img/cover.png') : imgUrl"
          class="cover autoRotate"
        />
      </div>
      <!-- 评论容器 -->
      <div class="comment_wrapper">
        <h5 class="title">热门留言</h5>
        <div class="comment_list">
          <dl v-for="item in hotComments" :key="item.id">
            <dt>
              <img :src="item.user.avatarUrl" alt="" />
            </dt>
            <dd class="name">{{ item.user.nickname }}</dd>
            <dd class="detail">
              {{ item.content }}
            </dd>
          </dl>
        </div>
        <img src="../assets/img/line.png" class="right_line" />
      </div>
    </div>
    <div class="audio_con">
      <audio
        ref="audio"
        @play="play"
        @pause="pause"
        :src="musicUrl"
        controls
        autoplay
        loop
        class="myaudio"
      ></audio>
    </div>
    <div class="video_con" v-show="showVideo">
      <video ref="video" :src="mvUrl" controls="controls"></video>
      <div class="mask"></div>
      <div class="shutoff" @click="closeMv"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 搜索关键字
      query: "",
      musicList: [],
      musicUrl: "",
      // 歌曲热门评论
      hotComments: "",
      // 歌曲封面地址
      imgUrl: "",
      // 是否正在播放
      isPlay: false,
      // 显示视频播放
      showVideo: false,
      // mv地址
      mvUrl: "",
    };
  },
  methods: {
    async searchMusic() {
      if (this.query === "") return;
      const { data: res } = await this.$http.get(
        "/search?keywords=" + this.query
      );
      this.musicList = res.result.songs;
      // console.log(this.musicList);
      this.query = "";
    },
    async playMusic(id) {
      // 获取歌曲url
      const { data: res } = await this.$http.get("/song/url?id=" + id);
      // console.log(res);
      this.musicUrl = res.data[0].url;
      // console.log(this.musicUrl);
      // 获取歌曲评论
      const { data: ret } = await this.$http.get("comment/hot?type=0&id=" + id);
      // console.log(ret);
      this.hotComments = ret.hotComments;
      // 获取歌曲封面
      const data = await this.$http.get("/song/detail?ids=" + id);
      this.imgUrl = data.data.songs[0].al.picUrl;
      // console.log(this.coverUrl);
    },
    play() {
      this.isPlay = true;
      // 清空mv的信息
      this.mvUrl = "";
    },
    // audio的pause事件
    pause() {
      this.isPlay = false;
    },
    // 播放mv
    async playMv(vid) {
      if (vid) {
        this.showVideo = true;
        // 获取mv信息
        const res = await this.$http.get("/mv/url?id=" + vid);
        // console.log(response)
        // 暂停歌曲播放
        this.$refs.audio.pause();
        // 获取mv地址
        this.mvUrl = res.data.data.url;
      }
    },
    closeMv() {
      this.showVideo = false;
      this.$refs.video.pause();
    },
    // 搜索历史记录中的歌曲
    historySearch(history) {
      this.query = history;
      this.searchMusic();
      this.showHistory = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.wrap {
  width: 800px;
  height: 544px;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.search {
  height: 60px;
  background-color: #1eacda;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 11;
  img {
    margin-left: 23px;
  }
  input {
    margin-right: 23px;
    width: 296px;
    height: 34px;
    border-radius: 17px;
    background: url("../assets/img/zoom.png") 265px center no-repeat
      rgba(255, 255, 255, 0.45);
    text-indent: 15px;
  }
}

.center_con {
  height: 435px;
  background-color: rgba(255, 255, 255, 0.5);
  display: flex;
  position: relative;
  .song_wrapper {
    width: 200px;
    height: 100%;
    box-sizing: border-box;
    padding: 10px;
    list-style: none;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 1;
    .song_list {
      width: 100%;
      overflow-y: auto;
      overflow-x: hidden;
      height: 100%;
      li {
        font-size: 12px;
        color: #333;
        height: 40px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        width: 580px;
        padding-left: 10px;
        &:nth-child(odd) {
          background-color: rgba(240, 240, 240, 0.3);
        }
        a {
          display: block;
          width: 17px;
          height: 17px;
          background-image: url("../assets/img/play.png");
          background-size: 100%;
          margin-right: 5px;
          box-sizing: border-box;
        }
        b {
          font-weight: normal;
          width: 122px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        span {
          width: 23px;
          height: 17px;
          margin-right: 50px;
          i {
            display: block;
            width: 100%;
            height: 100%;
            cursor: pointer;
            background: url("../assets/img/table.png") left -48px no-repeat;
          }
        }
      }
      &::-webkit-scrollbar {
        display: none;
      }
    }
  }

  .player_con {
    width: 400px;
    height: 435px;
    position: absolute;
    left: 200px;
    top: 0px;
    .play_bar {
      position: absolute;
      left: 200px;
      top: -10px;
      z-index: 10;
      transform: rotate(-25deg);
      transform-origin: 12px 12px;
      transition: 1s;
    }
    .disc {
      position: absolute;
      left: 73px;
      top: 60px;
      z-index: 9;
    }
    .cover {
      position: absolute;
      left: 125px;
      top: 112px;
      width: 150px;
      height: 150px;
      border-radius: 75px;
      z-index: 8;
    }
  }

  .comment_wrapper {
    width: 180px;
    height: 435px;
    list-style: none;
    position: absolute;
    left: 600px;
    top: 0px;
    padding: 25px 10px;
    .title {
      position: absolute;
      top: 0;
      margin-top: 10px;
    }
    .comment_list {
      overflow: auto;
      height: 410px;
      &::-webkit-scrollbar {
        display: none;
      }
      dl {
        padding-top: 10px;
        padding-left: 55px;
        position: relative;
        margin-bottom: 20px;
        dt {
          position: absolute;
          left: 4px;
          top: 10px;
          img {
            width: 30px;
            height: 30px;
            border-radius: 15px;
          }
        }
        dd {
          font-size: 12px;
        }
        .name {
          font-weight: bold;
          color: #333;
          padding-top: 5px;
        }
        .detail {
          color: #666;
          margin-top: 5px;
          line-height: 18px;
        }
      }
    }
    .right_line {
      position: absolute;
      left: 0;
      top: 0;
    }
  }
}

.audio_con {
  height: 50px;
  background-color: #f1f3f4;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  .myaudio {
    width: 800px;
    height: 40px;
    margin-top: 5px;
    outline: none;
    background-color: #f1f3f4;
  }
}

/* 旋转的动画 */
@keyframes Rotate {
  from {
    transform: rotateZ(0);
  }
  to {
    transform: rotateZ(360deg);
  }
}
/* 旋转的类名 */
.autoRotate {
  animation-name: Rotate;
  animation-iteration-count: infinite;
  animation-play-state: paused;
  animation-timing-function: linear;
  animation-duration: 5s;
}
/* 是否正在播放 */
.player_con.playing .disc,
.player_con.playing .cover {
  animation-play-state: running;
}

/* 播放杆 转回去 */
.player_con.playing .play_bar {
  transform: rotate(0);
}

.video_con {
  video {
    position: fixed;
    width: 800px;
    height: 546px;
    left: 50%;
    top: 50%;
    margin-top: -273px;
    transform: translateX(-50%);
    z-index: 990;
  }
  .mask {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 980;
    background-color: rgba(0, 0, 0, 0.8);
  }
  .shutoff {
    position: fixed;
    width: 40px;
    height: 40px;
    background: url("../assets/img/shutoff.png") no-repeat;
    left: 50%;
    margin-left: 400px;
    margin-top: -273px;
    top: 50%;
    transform: translate(-42px, 5px);
    z-index: 995;
  }
}

/* 搜索历史列表 */
.search_history {
  position: absolute;
  width: 296px;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.3);
  list-style: none;
  right: 23px;
  top: 50px;
  box-sizing: border-box;
  padding: 10px 20px;
  border-radius: 17px;
}
.search_history li {
  line-height: 24px;
  font-size: 12px;
  cursor: pointer;
}
</style>